<template>
  <div class="equipment-load-container no-background-container">
    <!-- 顶部统计卡片 -->
    <div class="page-top">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in cardInfo" :key="index" :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
          <el-card>
            <div class="card-top">
              <div class="title-with-icon">
                <vab-icon class="card-icon" :icon="item.icon" />
                <span>{{ item.title }}</span>
              </div>
              <div>{{ item.en }}</div>
            </div>
            <div class="card-middle">
              <div v-for="(it, idx) in item.data" :key="idx" class="middle-row">
                <div class="middle-left">
                  <div>{{ it.name }}</div>
                  <div>{{ it.en }}</div>
                </div>
                <div class="middle-right">
                  <span>{{ it.value }}</span>
                  <span>{{ it.unit }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 用电趋势图 -->
    <el-row :gutter="20" style="margin-top: -20px">
      <el-col :span="24">
        <el-card>
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>家庭负荷类型分时分析图</span>
            </div>
            <div class="middle-right">
              <!-- <el-select v-model="selectedUser" placeholder="选择用户" style="width: 120px">
                <el-option v-for="user in userOptions" :key="user.value" :label="user.label" :value="user.value" />
              </el-select> -->
              <el-radio-group v-model="timeUnit" size="small">
                <el-radio-button label="hour">时</el-radio-button>
                <el-radio-button label="day">日</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div style="height: 300px">
            <vab-chart :option="trendChartOption" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 下半部分：三个模块 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 设备查询分析 -->
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <!-- 标题 -->
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>设备用电总览</span>
            </div>
            <div class="middle-right">
              <!-- 时间选择器 -->
              <el-date-picker
                v-model="selectedOverviewDate"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                size="small"
                style="width: 140px"
                @change="handleOverviewDateChange"
              />
            </div>
          </div>

          <!-- 设备用电总览表格 -->
          <div class="equipment-overview-table">
            <el-table
              :data="equipmentOverviewData"
              border
              size="small"
              style="width: 100%"
              height="320"
              row-key="id"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              :default-expand-all="false"
            >
              <el-table-column width="220" prop="loadType" label="负荷类型">
                <template #default="scope">
                  <div v-if="scope.row.isParent" class="load-type-parent">
                    <vab-icon :icon="scope.row.icon" class="load-type-icon" />
                    {{ scope.row.loadType }}
                  </div>
                  <div v-else class="device-name">
                    <vab-icon :icon="scope.row.deviceIcon" class="device-icon" />
                    {{ scope.row.deviceName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="120" prop="consumptionMonth" label="累计用电量" align="center">
                <template #default="scope">
                  <div v-if="scope.row.consumptionMonth !== '-'">
                    <div class="main-value">{{ scope.row.consumptionMonth }}</div>
                    <div class="percentage">({{ scope.row.consumptionPercentage }})</div>
                  </div>
                  <div v-else class="no-data">-</div>
                </template>
              </el-table-column>
              <el-table-column prop="powerCurrent" label="功率" width="120" align="center">
                <template #default="scope">
                  <div v-if="scope.row.powerCurrent !== '-'">
                    <div class="main-value">{{ scope.row.powerCurrent }}</div>
                    <div class="percentage">({{ scope.row.powerPercentage }})</div>
                  </div>
                  <div v-else class="no-data">-</div>
                </template>
              </el-table-column>
              <el-table-column prop="energyLevel" label="能效等级" align="center">
                <template #default="scope">
                  <el-tag
                    v-if="scope.row.energyLevel !== '-' && !scope.row.isParent"
                    :type="getEnergyLevelType(scope.row.energyLevel)"
                    size="small"
                    effect="plain"
                  >
                    {{ scope.row.energyLevel }}
                  </el-tag>
                  <span v-else-if="scope.row.isParent" class="parent-placeholder">-</span>
                  <span v-else class="no-data">-</span>
                </template>
              </el-table-column>
            </el-table>

            <!-- 合计统计区域 -->
            <div class="summary-container">
              <div class="summary-header">
                <span class="summary-title">总计 (Grand Total)</span>
                <div class="summary-status">
                  <span class="status-indicator">综合概览</span>
                </div>
              </div>
              <div class="summary-content">
                <div class="summary-item">
                  <div class="summary-label">累计用电量</div>
                  <div class="summary-value">{{ totalSummary.totalConsumption }} kWh</div>
                </div>
                <div class="summary-item">
                  <div class="summary-label">功率</div>
                  <div class="summary-value">{{ totalSummary.totalPower }} kW</div>
                </div>
                <div class="summary-item status-overview">
                  <div class="summary-label">综合概览</div>
                  <div class="summary-value">{{ totalSummary.status }}</div>
                </div>
              </div>
            </div>

            <!-- 图例说明 -->
            <div class="legend-container">
              <div class="legend-title">图例说明</div>
              <div class="legend-items">
                <div class="legend-item">
                  <div class="legend-dot success"></div>
                  <span>一级能效 (高效节能)</span>
                </div>
                <div class="legend-item">
                  <div class="legend-dot warning"></div>
                  <span>二级能效 (节能)</span>
                </div>
                <div class="legend-item">
                  <div class="legend-dot danger"></div>
                  <span>三级能效 (普通)</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 注释掉原有的设备查询分析内容 -->
          <!--
          <div class="equipment-search-section">
            <div class="equipment-search-container">
              <el-input
                v-model="equipmentSearchQuery"
                class="search-input-full"
                clearable
                placeholder="用户001"
                @input="handleSearchInput"
                @keyup.enter="searchEquipment"
              >
                <template #prefix>
                  <el-icon>
                    <vab-icon icon="search-2-line" />
                  </el-icon>
                </template>
              </el-input>
              <el-button class="search-button" type="primary" @click="searchEquipment">查询</el-button>
            </div>

            <div v-if="hasEquipmentSearched && currentEquipmentList.length > 0" class="current-user-title">
              <span class="user-title-text">{{ getCurrentUserTitle() }}</span>
            </div>
          </div>

          <div class="equipment-table-container">
            <template v-if="currentEquipmentList.length > 0">
              <el-table border :data="currentEquipmentList" highlight-current-row style="width: 100%">
                <el-table-column label="设备序号" prop="deviceId" width="80" />
                <el-table-column label="设备类型" prop="deviceType" width="80" />
                <el-table-column label="识别功率" prop="power" width="80" />
                <el-table-column label="识别时间" prop="identifyTime" width="200" />
                <el-table-column label="今日开关次数" prop="switchCount" width="120" />
                <el-table-column label="功率-时间曲线图">
                  <template #default="scope">
                    <el-button size="small" type="text" @click="viewEquipmentChart(scope.row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template v-else>
              <div class="no-equipment-data">
                <el-empty description="暂无设备数据" :image-size="100">
                  <template #description>
                    <p style="font-size: 14px; color: #909399">请查询其他用户设备信息</p>
                  </template>
                </el-empty>
              </div>
            </template>
          </div>
          -->
        </el-card>
      </el-col>

      <!-- 用电分布图 -->
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>负荷类型分布</span>
            </div>
            <div class="middle-right">
              <!-- 注释掉用户选择，改为日期选择 -->
              <!-- <el-select v-model="selectedDistributionUser" placeholder="选择用户" style="width: 100px">
                <el-option v-for="user in userOptions" :key="user.value" :label="user.label" :value="user.value" />
              </el-select> -->
              <el-date-picker
                v-model="selectedDistributionDate"
                type="date"
                placeholder="选择日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                size="small"
                style="width: 140px"
                @change="handleDistributionDateChange"
              />
            </div>
          </div>

          <!-- 只保留饼图，移除条形图 -->
          <div class="distribution-charts">
            <div style="height: 400px">
              <vab-chart :option="pieChartOption" />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 用电保证分析 -->
      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
        <el-card class="card-style">
          <div class="index-middle">
            <div class="middle-left">
              <span class="title-style"></span>
              <span>用电保证分析</span>
            </div>
            <div class="middle-right">
              <!-- 注释掉用户选择 -->
              <!-- <el-select v-model="selectedTimelineUser" placeholder="选择用户" style="width: 100px">
                <el-option v-for="user in userOptions" :key="user.value" :label="user.label" :value="user.value" />
              </el-select> -->
            </div>
          </div>

          <!-- 用电保证分析内容 -->
          <div class="power-guarantee-analysis">
            <!-- 高峰输出保证 -->
            <div class="analysis-item">
              <div class="analysis-left">
                <div class="analysis-icon peak-output">
                  <vab-icon icon="fire-line" />
                </div>
                <div class="analysis-content">
                  <div class="analysis-title">高耗能设备分析</div>
                  <div class="analysis-description">电热水器为当日用电量最高设备，用电量2.45kWh，占总用电量42.2%</div>
                </div>
              </div>
              <div class="analysis-values">
                <div class="main-value">2.45kWh</div>
                <div class="percentage">42.2%</div>
                <div class="sub-label">本期用电量</div>
                <div class="sub-label">增幅占比</div>
              </div>
            </div>

            <!-- 设备能效水平 -->
            <div class="analysis-item">
              <div class="analysis-left">
                <div class="analysis-icon efficiency-level">
                  <vab-icon icon="star-line" />
                </div>
                <div class="analysis-content">
                  <div class="analysis-title">设备能效水平</div>
                  <div class="analysis-description">综合能效达到准备，96.7%能效达标率为28%以上的领先优势，数据支撑居民96.7%实际使用周期</div>
                </div>
              </div>
              <div class="analysis-values">
                <div class="main-value">1级</div>
                <div class="percentage">96.7%</div>
                <div class="sub-label">综合等级</div>
                <div class="sub-label">能效达标率</div>
              </div>
            </div>

            <!-- 需求响应能力 -->
            <div class="analysis-item">
              <div class="analysis-left">
                <div class="analysis-icon response-capability">
                  <vab-icon icon="flashlight-line" />
                </div>
                <div class="analysis-content">
                  <div class="analysis-title">需求响应能力</div>
                  <div class="analysis-description">电价优势为62.8%，样程率行政的路线高性电网响应能力，用电负荷需求运输</div>
                </div>
              </div>
              <div class="analysis-values">
                <div class="main-value">2.4kW</div>
                <div class="percentage">62.8%</div>
                <div class="sub-label">可调节容量</div>
                <div class="sub-label">目标完成率</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 设备详情弹窗 -->
    <el-dialog v-model="equipmentDialogVisible" destroy-on-close title="设备运行曲线" width="800px">
      <div v-if="selectedEquipment">
        <div class="equipment-info">
          <h4>{{ equipmentSearchQuery || '用户' }}-{{ selectedEquipment.deviceType }}</h4>
          <!-- <p>功率: {{ selectedEquipment.power }} | 状态: {{ selectedEquipment.status }}</p> -->
        </div>
        <div style="height: 300px">
          <vab-chart :option="equipmentDetailOption" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { graphic } from 'echarts/core'
import {
  getCardInfo,
  getDevicePowerCurve,
  getDevicePowerDetail,
  getDevicePowerTimeAxis,
  getDeviceUse,
  getPowerTrend,
  getUserDevice,
} from '/@/api/equipment'

defineOptions({
  name: 'EquipmentLoad',
})

// 设备类型接口
interface Equipment {
  deviceId: string
  deviceType: string
  power: string
  identifyTime?: string
  switchCount?: string
  // status?: string
}

// 用户设备数据接口（已注释，使用API数据）
// interface UserEquipmentData {
//   [key: string]: Equipment[]
// }

// 设备功率数据接口（已注释，使用API数据）
// interface DevicePowerData {
//   [key: string]: number[]
// }

// 用户用电数据类型接口（已注释，使用API数据）
// interface UserPowerData {
//   冰箱: number[]
//   热水器: number[]
//   空调: number[]
//   照明: number[]
// }

// 用户用电数据映射接口（已注释，使用API数据）
// interface UserPowerDataMap {
//   [key: string]: UserPowerData
// }

// 用户时间轴数据映射接口（已注释，使用API数据）
// interface UserTimelineDataMap {
//   [key: string]: (string | number)[][]
// }

// API数据存储
const cardInfo = ref<any[]>([])
const userOptions = ref<any[]>([])
const currentTrendData = ref<any>({})
const currentDistributionData = ref<any>({})
const currentTimelineData = ref<any[]>([])
const currentEquipmentSearchData = ref<any[]>([])
const currentDevicePowerCurveData = ref<any[]>([])

// 用户选择选项（静态数据注释保留）
// const userOptions = [
//   { label: '用户001', value: '001' },
//   { label: '用户002', value: '002' },
//   { label: '用户003', value: '003' },
// ]

const selectedUser = ref('001')
// const selectedDistributionUser = ref('001') // 注释掉用户选择，改为日期选择
const selectedDistributionDate = ref('2024-07-15') // 新增日期选择变量
// const selectedTimelineUser = ref('001') // 注释掉设备启停时间轴用户选择

// 设备查询相关变量
const equipmentSearchQuery = ref('用户001')
const hasEquipmentSearched = ref(true) // 默认已搜索，显示用户001数据

// 不同用户的设备列表数据（静态数据注释保留）
// const userEquipmentData = ref<UserEquipmentData>({
//   用户001: [
//     { deviceId: '1', deviceType: '照明', power: '0.8kW', identifyTime: '2025-06-30 14:32', switchCount: '3次' },
//     { deviceId: '2', deviceType: '空调', power: '3.2kW', identifyTime: '2025-06-30 14:32', switchCount: '2次' },
//     { deviceId: '3', deviceType: '热水器', power: '2.1kW', identifyTime: '2025-06-30 14:32', switchCount: '4次' },
//     { deviceId: '4', deviceType: '冰箱', power: '0.15kW', identifyTime: '2025-06-30 14:32', switchCount: '3次' },
//   ],
//   用户002: [
//     { deviceId: '1', deviceType: '照明', power: '0.6kW', identifyTime: '2025-06-30 15:20', switchCount: '5次' },
//     { deviceId: '2', deviceType: '空调', power: '2.8kW', identifyTime: '2025-06-30 15:20', switchCount: '3次' },
//     { deviceId: '3', deviceType: '热水器', power: '1.8kW', identifyTime: '2025-06-30 15:20', switchCount: '2次' },
//     { deviceId: '4', deviceType: '冰箱', power: '0.12kW', identifyTime: '2025-06-30 15:20', switchCount: '4次' },
//   ],
//   用户003: [
//     { deviceId: '1', deviceType: '照明', power: '0.9kW', identifyTime: '2025-06-30 16:15', switchCount: '4次' },
//     { deviceId: '2', deviceType: '空调', power: '3.5kW', identifyTime: '2025-06-30 16:15', switchCount: '1次' },
//     { deviceId: '3', deviceType: '热水器', power: '2.3kW', identifyTime: '2025-06-30 16:15', switchCount: '3次' },
//     { deviceId: '4', deviceType: '冰箱', power: '0.18kW', identifyTime: '2025-06-30 16:15', switchCount: '2次' },
//   ],
// })

// 当前显示的设备列表 - 支持模糊查询
const currentEquipmentList = computed(() => {
  if (!hasEquipmentSearched.value) {
    return []
  }

  // 返回当前搜索到的设备数据
  return currentEquipmentSearchData.value || []
})

// 设备详情弹窗
const equipmentDialogVisible = ref(false)
const selectedEquipment = ref<Equipment | null>(null)

// 搜索设备
const searchEquipment = () => {
  console.log('搜索设备:', equipmentSearchQuery.value)
  hasEquipmentSearched.value = true
  // 调用API获取设备数据
  if (equipmentSearchQuery.value.trim()) {
    // fetchUserDeviceData(equipmentSearchQuery.value.trim())
  }
}

// 输入框变化处理 - 实时模糊查询
const handleSearchInput = (value: string) => {
  // 如果输入框有内容，自动进行搜索
  if (value.trim()) {
    hasEquipmentSearched.value = true
  } else {
    hasEquipmentSearched.value = false
  }
}

const viewEquipmentChart = async (equipment: Equipment) => {
  selectedEquipment.value = equipment
  // 调用API获取设备功率曲线数据
  console.log('设备类型:', equipment)
  try {
    const response = await getDevicePowerCurve({
      device_type: equipment.deviceType,
      device_id: equipment.deviceId, // 添加设备ID参数
    })
    currentDevicePowerCurveData.value = response.data || []
    console.log('API返回数据:', response.data)
  } catch (error) {
    console.error('获取设备功率曲线数据失败:', error)
  }
  equipmentDialogVisible.value = true
}

// 获取当前用户标题
const getCurrentUserTitle = () => {
  const searchKey = equipmentSearchQuery.value.trim()
  if (!searchKey) return ''

  // 返回搜索的关键字作为用户标题
  return searchKey
}

// 不同用户的用电数据（静态数据注释保留）
// const userPowerData: UserPowerDataMap = {
//   '001': {
//     冰箱: [4.2, 2.5, 3.8, 4.5, 3.2, 4.8, 3.5, 2.8, 4.2, 3.8, 2.2, 2.5, 2.8, 2.2, 2.5, 4.2, 2.8, 3.8, 4.2, 2.2, 3.8, 2.2, 1.8, 4.5],
//     热水器: [1.2, 2.2, 1.8, 2.8, 1.5, 3.2, 2.8, 4.5, 1.8, 6.2, 7.8, 2.2, 2.5, 2.8, 6.2, 1.8, 1.5, 6.8, 3.2, 2.8, 6.2, 4.8, 6.8, 1.2],
//     空调: [3.8, 2.8, 4.2, 6.5, 2.5, 2.2, 2.8, 1.5, 2.8, 3.2, 2.8, 4.5, 2.5, 2.5, 4.2, 2.2, 2.5, 3.2, 3.6, 5.2, 2.2, 2.8, 2.2, 6.5],
//     照明: [3.8, 4.5, 4.2, 3.2, 2.8, 3.8, 1.8, 2.2, 3.8, 2.8, 3.2, 1.8, 2.2, 3.8, 2.2, 2.8, 3.2, 2.8, 2.2, 1.8, 3.8, 2.2, 4.2, 1.8],
//   },
//   '002': {
//     冰箱: [2.8, 3.2, 2.5, 3.8, 2.2, 3.5, 2.8, 3.2, 2.5, 3.8, 3.2, 2.8, 3.5, 2.2, 3.8, 2.5, 3.2, 2.8, 3.5, 2.2, 2.8, 3.2, 2.5, 3.8],
//     热水器: [2.5, 1.8, 2.2, 3.5, 2.8, 4.2, 3.8, 5.2, 2.2, 4.8, 6.5, 3.2, 2.8, 3.5, 5.8, 2.5, 2.2, 5.5, 4.2, 3.8, 5.2, 4.5, 5.8, 2.5],
//     空调: [2.2, 1.8, 2.5, 4.2, 1.5, 1.8, 2.2, 1.2, 2.5, 2.8, 2.2, 3.8, 2.2, 2.8, 3.5, 1.8, 2.2, 2.8, 3.2, 4.5, 1.8, 2.2, 1.8, 4.8],
//     照明: [2.5, 3.2, 2.8, 2.2, 1.8, 2.5, 1.2, 1.8, 2.5, 2.2, 2.8, 1.5, 1.8, 2.5, 1.8, 2.2, 2.8, 2.2, 1.8, 1.5, 2.5, 1.8, 3.2, 1.5],
//   },
//   '003': {
//     冰箱: [3.5, 4.2, 3.8, 5.2, 4.5, 5.8, 4.2, 3.8, 5.2, 4.8, 3.2, 3.5, 3.8, 3.2, 3.5, 5.2, 3.8, 4.8, 5.2, 3.2, 4.8, 3.2, 2.8, 5.5],
//     热水器: [1.8, 3.2, 2.8, 4.2, 2.5, 4.8, 4.2, 6.5, 2.8, 8.2, 9.5, 3.2, 3.5, 4.2, 8.8, 2.8, 2.5, 8.5, 4.8, 4.2, 8.2, 6.5, 8.8, 1.8],
//     空调: [5.2, 4.8, 6.2, 8.5, 4.2, 3.8, 4.2, 2.5, 4.8, 5.2, 4.8, 6.5, 4.2, 4.5, 6.2, 3.8, 4.2, 5.2, 5.8, 7.2, 3.8, 4.8, 3.8, 8.5],
//     照明: [5.2, 6.5, 6.2, 4.8, 4.2, 5.8, 2.8, 3.2, 5.8, 4.8, 5.2, 2.8, 3.2, 5.8, 3.2, 4.8, 5.2, 4.8, 3.2, 2.8, 5.8, 3.2, 6.2, 2.8],
//   },
// }

// 时间单位选择
const timeUnit = ref('hour')

// 虚拟数据 - 不同时间维度的负荷数据
const mockLoadData = {
  hour: {
    阻性负荷: [100, 95, 88, 82, 78, 75, 80, 85, 90, 95, 98, 100, 98, 95, 92, 90, 92, 95, 100, 98, 95, 92, 90, 85],
    感性负荷: [45, 42, 40, 38, 35, 32, 35, 38, 42, 45, 48, 50, 48, 45, 42, 40, 42, 45, 48, 45, 42, 40, 38, 35],
    非线性负荷: [25, 23, 22, 20, 18, 15, 18, 20, 22, 25, 28, 30, 28, 25, 22, 20, 22, 25, 28, 25, 22, 20, 18, 15],
    间歇性负荷: [18, 15, 12, 10, 8, 5, 8, 10, 12, 15, 18, 20, 18, 15, 12, 10, 12, 15, 18, 15, 12, 10, 8, 5],
  },
  day: {
    阻性负荷: Array.from({ length: 31 }, () => Math.floor(Math.random() * 50) + 70),
    感性负荷: Array.from({ length: 31 }, () => Math.floor(Math.random() * 30) + 30),
    非线性负荷: Array.from({ length: 31 }, () => Math.floor(Math.random() * 20) + 15),
    间歇性负荷: Array.from({ length: 31 }, () => Math.floor(Math.random() * 15) + 5),
  },
  month: {
    阻性负荷: Array.from({ length: 12 }, () => Math.floor(Math.random() * 50) + 70),
    感性负荷: Array.from({ length: 12 }, () => Math.floor(Math.random() * 30) + 30),
    非线性负荷: Array.from({ length: 12 }, () => Math.floor(Math.random() * 20) + 15),
    间歇性负荷: Array.from({ length: 12 }, () => Math.floor(Math.random() * 15) + 5),
  },
}

// 不同负荷类型对应的电器设备虚拟数据
const deviceDetailData = {
  阻性负荷: {
    电热水器: { hour: 47, day: 52, month: 48 },
    电饭煲: { hour: 31, day: 35, month: 33 },
    电暖器: { hour: 12, day: 15, month: 14 },
    照明设备: { hour: 12, day: 10, month: 11 },
  },
  感性负荷: {
    空调: { hour: 25, day: 28, month: 26 },
    冰箱: { hour: 18, day: 20, month: 19 },
    洗衣机: { hour: 8, day: 12, month: 10 },
    排风扇: { hour: 6, day: 8, month: 7 },
    吸尘器: { hour: 4, day: 6, month: 5 },
  },
  非线性负荷: {
    电脑设备: { hour: 15, day: 18, month: 16 },
    电视: { hour: 12, day: 14, month: 13 },
    微波炉: { hour: 8, day: 10, month: 9 },
    路由器: { hour: 5, day: 6, month: 5 },
    充电器: { hour: 3, day: 4, month: 3 },
  },
  间歇性负荷: {
    电磁炉: { hour: 10, day: 12, month: 11 },
    吹风机: { hour: 6, day: 8, month: 7 },
    电烤箱: { hour: 4, day: 6, month: 5 },
  },
}

// 用电趋势图配置
const trendChartOption = computed(() => {
  // const data = currentTrendData.value || {}
  const data = mockLoadData[timeUnit.value]

  // 根据时间单位生成X轴数据
  const getXAxisData = () => {
    switch (timeUnit.value) {
      case 'hour':
        return Array.from({ length: 24 }, (_, i) => `${i}:00`)
      case 'day':
        return Array.from({ length: 31 }, (_, i) => `${i + 1}`)
      case 'month':
        return Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
      default:
        return []
    }
  }

  const xAxisData = getXAxisData()
  const seriesData = [
    {
      name: '阻性负荷',
      type: 'bar',
      stack: 'total',
      data: data.阻性负荷,
      itemStyle: { color: '#36cbcb' },
    },
    {
      name: '感性负荷',
      type: 'bar',
      stack: 'total',
      data: data.感性负荷,
      itemStyle: { color: '#1890ff' },
    },
    {
      name: '非线性负荷',
      type: 'bar',
      stack: 'total',
      data: data.非线性负荷,
      itemStyle: { color: '#ffc107' },
    },
    {
      name: '间歇性负荷',
      type: 'bar',
      stack: 'total',
      data: data.间歇性负荷,
      itemStyle: { color: '#7c4dff' },
    },
  ]

  return {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        const time = params.name
        const loadType = params.seriesName
        const value = params.value

        let result = `${time}<br/>`
        result += `${loadType}: ${value} W<br/>`

        // 根据负荷类型显示对应的电器设备
        const devices = deviceDetailData[loadType]
        if (devices) {
          const timeKey = timeUnit.value
          Object.keys(devices).forEach(deviceName => {
            const deviceValue = devices[deviceName][timeKey] || devices[deviceName].hour
            result += `${deviceName}: ${deviceValue} W<br/>`
          })
        }

        return result
      },
    },
    legend: {
      data: ['阻性负荷', '感性负荷', '非线性负荷', '间歇性负荷'],
      top: 10,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
    },
    yAxis: {
      type: 'value',
      name: '负荷 W',
      max: 200,
      min: 0,
    },
    series: seriesData,
  }
})

// 注释掉原有的API调用
const fetchPowerTrendData = async (userId: string) => {
  // try {
  //   const response = await getPowerTrend({ user_name: userId })
  //   currentTrendData.value = response.data || {}
  // } catch (error) {
  //   console.error('获取用电趋势数据失败:', error)
  // }
  console.log('使用模拟数据', userId)
}

// 用户用电分布数据（静态数据注释保留）
// const userDistributionData: UserPowerDataMap = {
//   '001': {
//     冰箱: [35],
//     热水器: [25],
//     空调: [30],
//     照明: [10],
//   },
//   '002': {
//     冰箱: [28],
//     热水器: [32],
//     空调: [22],
//     照明: [18],
//   },
//   '003': {
//     冰箱: [42],
//     热水器: [38],
//     空调: [45],
//     照明: [25],
//   },
// }

// 负荷类型分布虚拟数据（14-16号三天）
const loadTypeDistributionData = {
  '2024-07-14': {
    阻性负荷: 7.75,
    感性负荷: 2.46,
    非线性负荷: 0.58,
    间歇性负荷: 0.12
  },
  '2024-07-15': {
    阻性负荷: 7.30,
    感性负荷: 2.36,
    非线性负荷: 0.64,
    间歇性负荷: 0.16
  },
  '2024-07-16': {
    阻性负荷: 7.85,
    感性负荷: 2.66,
    非线性负荷: 0.70,
    间歇性负荷: 0.18
  }
}

// 饼图配置
const pieChartOption = computed(() => {
  // 使用负荷类型分布数据而不是设备类型数据
  const dateData = loadTypeDistributionData[selectedDistributionDate.value] || {}

  // 处理负荷类型分布数据
  let pieData: any[] = []

  if (Object.keys(dateData).length > 0) {
    pieData = [
      { value: parseFloat(dateData.阻性负荷 || 0), name: '阻性负荷', itemStyle: { color: '#36cbcb' } },
      { value: parseFloat(dateData.感性负荷 || 0), name: '感性负荷', itemStyle: { color: '#1890ff' } },
      { value: parseFloat(dateData.非线性负荷 || 0), name: '非线性负荷', itemStyle: { color: '#ffc107' } },
      { value: parseFloat(dateData.间歇性负荷 || 0), name: '间歇性负荷', itemStyle: { color: '#7c4dff' } },
    ]
  }

  // 如果没有数据，使用默认值
  if (pieData.length === 0) {
    pieData = [
      { value: 0, name: '阻性负荷', itemStyle: { color: '#36cbcb' } },
      { value: 0, name: '感性负荷', itemStyle: { color: '#1890ff' } },
      { value: 0, name: '非线性负荷', itemStyle: { color: '#ffc107' } },
      { value: 0, name: '间歇性负荷', itemStyle: { color: '#7c4dff' } },
    ]
  }

  return {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}kWh ({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['阻性负荷', '感性负荷', '非线性负荷', '间歇性负荷'],
      textStyle: {
        color: '#606266',
        fontSize: 12,
      },
    },
    series: [
      {
        name: '负荷分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        data: pieData,
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2,
        },
      },
    ],
  }
})

// 条形图配置已删除，模块中不再需要条形图

// 用户设备启停时间数据（静态数据注释保留）
// const userTimelineData: UserTimelineDataMap = {
//   '001': [
//     [0, '2023-12-01 00:00:00', '2023-12-01 23:59:59', '#7c4dff'], // 冰箱全天运行
//     [1, '2023-12-01 00:00:00', '2023-12-01 05:00:00', '#ffc107'], // 热水器夜间
//     [1, '2023-12-01 06:00:00', '2023-12-01 08:00:00', '#ffc107'], // 热水器早上
//     [1, '2023-12-01 09:00:00', '2023-12-01 11:00:00', '#ffc107'], // 热水器上午
//     [1, '2023-12-01 13:00:00', '2023-12-01 15:00:00', '#ffc107'], // 热水器下午
//     [1, '2023-12-01 17:00:00', '2023-12-01 19:00:00', '#ffc107'], // 热水器傍晚
//     [1, '2023-12-01 20:00:00', '2023-12-01 23:59:59', '#ffc107'], // 热水器晚上
//     [2, '2023-12-01 00:00:00', '2023-12-01 04:00:00', '#1890ff'], // 空调夜间
//     [2, '2023-12-01 07:00:00', '2023-12-01 09:00:00', '#1890ff'], // 空调早上
//     [2, '2023-12-01 11:00:00', '2023-12-01 16:00:00', '#1890ff'], // 空调中午
//     [2, '2023-12-01 18:00:00', '2023-12-01 23:59:59', '#1890ff'], // 空调晚上
//     [3, '2023-12-01 00:00:00', '2023-12-01 05:00:00', '#36cbcb'], // 照明夜间
//     [3, '2023-12-01 06:00:00', '2023-12-01 11:00:00', '#36cbcb'], // 照明早上
//     [3, '2023-12-01 12:00:00', '2023-12-01 16:00:00', '#36cbcb'], // 照明下午
//     [3, '2023-12-01 17:00:00', '2023-12-01 23:59:59', '#36cbcb'], // 照明晚上
//   ],
//   '002': [
//     [0, '2023-12-01 00:00:00', '2023-12-01 23:59:59', '#7c4dff'], // 冰箱全天运行
//     [1, '2023-12-01 06:00:00', '2023-12-01 09:00:00', '#ffc107'], // 热水器早上
//     [1, '2023-12-01 12:00:00', '2023-12-01 14:00:00', '#ffc107'], // 热水器中午
//     [1, '2023-12-01 18:00:00', '2023-12-01 21:00:00', '#ffc107'], // 热水器晚上
//     [2, '2023-12-01 08:00:00', '2023-12-01 11:00:00', '#1890ff'], // 空调上午
//     [2, '2023-12-01 14:00:00', '2023-12-01 17:00:00', '#1890ff'], // 空调下午
//     [2, '2023-12-01 19:00:00', '2023-12-01 22:00:00', '#1890ff'], // 空调晚上
//     [3, '2023-12-01 07:00:00', '2023-12-01 09:00:00', '#36cbcb'], // 照明早上
//     [3, '2023-12-01 18:00:00', '2023-12-01 23:00:00', '#36cbcb'], // 照明晚上
//   ],
//   '003': [
//     [0, '2023-12-01 00:00:00', '2023-12-01 23:59:59', '#7c4dff'], // 冰箱全天运行
//     [1, '2023-12-01 00:00:00', '2023-12-01 06:00:00', '#ffc107'], // 热水器夜间
//     [1, '2023-12-01 07:00:00', '2023-12-01 10:00:00', '#ffc107'], // 热水器早上
//     [1, '2023-12-01 11:00:00', '2023-12-01 13:00:00', '#ffc107'], // 热水器中午
//     [1, '2023-12-01 16:00:00', '2023-12-01 20:00:00', '#ffc107'], // 热水器下午晚上
//     [1, '2023-12-01 21:00:00', '2023-12-01 23:59:59', '#ffc107'], // 热水器深夜
//     [2, '2023-12-01 00:00:00', '2023-12-01 05:00:00', '#1890ff'], // 空调夜间
//     [2, '2023-12-01 08:00:00', '2023-12-01 12:00:00', '#1890ff'], // 空调上午
//     [2, '2023-12-01 14:00:00', '2023-12-01 18:00:00', '#1890ff'], // 空调下午
//     [2, '2023-12-01 20:00:00', '2023-12-01 23:59:59', '#1890ff'], // 空调晚上
//     [3, '2023-12-01 00:00:00', '2023-12-01 07:00:00', '#36cbcb'], // 照明夜间
//     [3, '2023-12-01 08:00:00', '2023-12-01 12:00:00', '#36cbcb'], // 照明上午
//     [3, '2023-12-01 13:00:00', '2023-12-01 17:00:00', '#36cbcb'], // 照明下午
//     [3, '2023-12-01 18:00:00', '2023-12-01 23:59:59', '#36cbcb'], // 照明晚上
//   ],
// }

// 注释掉设备启停时间轴相关代码
// // 时间轴标签（0-24点，每隔3小时）
// const timeLabels = ['0:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '24:00']

// // 设备列表配置
// const deviceList = [
//   { name: '照明', color: 'rgba(255, 158, 199, 0.5)' },
//   { name: '空调', color: 'rgba(255, 179, 102, 0.5)' },
//   { name: '热水器', color: 'rgba(115, 209, 61, 0.5)' },
//   { name: '冰箱', color: 'rgba(89, 126, 247, 0.5)' },
// ]

// // 获取设备时间段数据
// const getDeviceTimePeriods = (deviceName: string) => {
//   const timelineData = currentTimelineData.value || []

//   const periods: Array<{ start: number; end: number }> = []

//   if (Array.isArray(timelineData)) {
//     // 从API数据中获取对应设备的时间段数据
//     const devicePeriods = timelineData.filter((item: any) => {
//       // 处理不同的设备名称匹配
//       const itemDeviceType = item.device_type || item.deviceType || item.deviceName || ''
//       return itemDeviceType === deviceName || itemDeviceType.includes(deviceName)
//     })

//     devicePeriods.forEach((item: any) => {
//       const startTimeStr = item.start_time || item.startTime
//       const endTimeStr = item.end_time || item.endTime

//       if (startTimeStr && endTimeStr) {
//         const startTime = new Date(startTimeStr)
//         const endTime = new Date(endTimeStr)

//         // 检查日期是否有效
//         if (!isNaN(startTime.getTime()) && !isNaN(endTime.getTime())) {
//           // 转换为小时数（0-24）
//           const startHour = startTime.getHours() + startTime.getMinutes() / 60
//           const endHour = endTime.getHours() + endTime.getMinutes() / 60

//           periods.push({
//             start: startHour,
//             end: endHour === 0 ? 24 : endHour, // 24:00 显示为24
//           })
//         }
//       }
//     })
//   }

//   return periods
// }

// // 时间格式化
// const formatTime = (hour: number) => {
//   const h = Math.floor(hour)
//   const m = Math.floor((hour - h) * 60)
//   return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`
// }

// 不同设备类型的24小时功率数据（静态数据注释保留）
// const devicePowerData = ref<DevicePowerData>({
//   照明: [3.8, 4.5, 4.2, 3.2, 2.8, 3.8, 1.8, 2.2, 3.8, 2.8, 3.2, 1.8, 2.2, 3.8, 2.2, 2.8, 3.2, 2.8, 2.2, 1.8, 3.8, 2.2, 4.2, 1.8],
//   空调: [3.8, 2.8, 4.2, 6.5, 2.5, 2.2, 2.8, 1.5, 2.8, 3.2, 2.8, 4.5, 2.5, 2.5, 4.2, 2.2, 2.5, 3.2, 3.6, 5.2, 2.2, 2.8, 2.2, 6.5],
//   热水器: [1.2, 2.2, 1.8, 2.8, 1.5, 3.2, 2.8, 4.5, 1.8, 6.2, 7.8, 2.2, 2.5, 2.8, 6.2, 1.8, 1.5, 6.8, 3.2, 2.8, 6.2, 4.8, 6.8, 1.2],
//   冰箱: [4.2, 2.5, 3.8, 4.5, 3.2, 4.8, 3.5, 2.8, 4.2, 3.8, 2.2, 2.5, 2.8, 2.2, 2.5, 4.2, 2.8, 3.8, 4.2, 2.2, 3.8, 2.2, 1.8, 4.5],
// })

// 设备详情图表配置
const equipmentDetailOption = computed(() => {
  const deviceType = selectedEquipment.value?.deviceType || '照明'
  const rawData = currentDevicePowerCurveData.value || []

  console.log('原始数据:', rawData)

  // 处理API返回的设备功率曲线数据
  let powerData: number[] = []
  let timeLabels: string[] = []

  if (Array.isArray(rawData) && rawData.length > 0) {
    // 根据API返回的数据结构处理
    // 数据格式：[{device_type: "照明", hour: 0, power_value: 3.8}, ...]

    // 筛选当前设备类型的数据
    const deviceData = rawData.filter((item: any) => item.device_type === deviceType || item.deviceType === deviceType)

    console.log('筛选后的设备数据:', deviceData)

    if (deviceData.length > 0) {
      // 按小时排序
      const sortedData = deviceData.sort((a: any, b: any) => (a.hour || 0) - (b.hour || 0))

      powerData = sortedData.map((item: any) => parseFloat(item.power_value || item.power || item.value || 0))
      timeLabels = sortedData.map((item: any) => `${item.hour || 0}:00`)
    } else {
      // 如果没有筛选到对应设备的数据，使用所有数据的第一个设备类型
      console.log('没有找到对应设备的数据，使用第一个设备的数据')

      // 获取第一个设备类型的数据
      const firstDeviceType = rawData[0]?.device_type || rawData[0]?.deviceType
      const firstDeviceData = rawData.filter((item: any) => (item.device_type || item.deviceType) === firstDeviceType)

      if (firstDeviceData.length > 0) {
        const sortedData = firstDeviceData.sort((a: any, b: any) => (a.hour || 0) - (b.hour || 0))

        powerData = sortedData.map((item: any) => parseFloat(item.power_value || item.power || item.value || 0))
        timeLabels = sortedData.map((item: any) => `${item.hour || 0}:00`)
      } else {
        // 如果都没有数据，使用原始数据排序
        const sortedData = rawData.sort((a: any, b: any) => (a.hour || 0) - (b.hour || 0))

        powerData = sortedData.map((item: any) => parseFloat(item.power_value || item.power || item.value || 0))
        timeLabels = sortedData.map((item: any) => `${item.hour || 0}:00`)
      }
    }

    console.log('处理后的功率数据:', powerData)
    console.log('处理后的时间标签:', timeLabels)
  }

  // 如果没有数据，使用默认时间轴
  if (timeLabels.length === 0) {
    timeLabels = [
      '0:00',
      '1:00',
      '2:00',
      '3:00',
      '4:00',
      '5:00',
      '6:00',
      '7:00',
      '8:00',
      '9:00',
      '10:00',
      '11:00',
      '12:00',
      '13:00',
      '14:00',
      '15:00',
      '16:00',
      '17:00',
      '18:00',
      '19:00',
      '20:00',
      '21:00',
      '22:00',
      '23:00',
    ]
  }

  return {
    title: {
      text: `${deviceType} - 24小时功率变化曲线`,
      left: 'center',
      textStyle: {
        fontSize: 16,
        color: '#333',
        fontWeight: 'bold',
      },
    },
    tooltip: {
      trigger: 'axis',
      formatter(params: any) {
        const point = params[0]
        return `${point.name}<br/>${point.seriesName}: ${point.value}kW`
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: timeLabels,
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
        rotate: 45,
        fontSize: 12,
      },
    },
    yAxis: {
      type: 'value',
      name: '功率(kW)',
      nameTextStyle: {
        color: '#666',
        fontSize: 14,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#e0e0e0',
        },
      },
    },
    series: [
      {
        name: '功率',
        type: 'line',
        data: powerData,
        smooth: false,
        symbol: 'circle',
        symbolSize: 6,
        itemStyle: {
          color: '#0ab389',
          borderColor: '#0ab389',
          borderWidth: 2,
        },
        lineStyle: {
          color: '#0ab389',
          width: 3,
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(10, 179, 137, 0.3)',
            },
            {
              offset: 1,
              color: 'rgba(10, 179, 137, 0.1)',
            },
          ]),
        },
      },
    ],
  }
})

// API接口方法
const fetchUserOptions = async () => {
  try {
    const response = await getDeviceUse()
    const data = response.data || []

    // 处理用户选项数据
    if (Array.isArray(data)) {
      userOptions.value = data.map((item: any) => ({
        label: item.label || item.name || item.user_name || item,
        value: item.value || item.code || item.user_id || item.user_name || item,
      }))
    } else {
      userOptions.value = []
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    // 设置默认用户选项
    userOptions.value = [
      { label: '用户001', value: '001' },
      { label: '用户002', value: '002' },
      { label: '用户003', value: '003' },
    ]
  }
}

const fetchCardInfo = async () => {
  // try {
  //   const response = await getCardInfo()
  //   const data = response.data || []

  //   // 处理卡片信息数据
  //   if (Array.isArray(data)) {
  //     cardInfo.value = data.map((item: any) => ({
  //       title: item.title || '统计信息',
  //       en: item.en || item.english || '',
  //       icon: item.icon || 'device-line',
  //       data: Array.isArray(item.data)
  //         ? item.data.map((dataItem: any) => ({
  //             name: dataItem.name || '',
  //             en: dataItem.en || dataItem.english || '',
  //             value: dataItem.value || '0',
  //             unit: dataItem.unit || '',
  //           }))
  //         : [],
  //     }))
  //   } else {
  //     cardInfo.value = []
  //   }
  // } catch (error) {
  //   console.error('获取卡片信息失败:', error)
    // 设置默认卡片数据
    cardInfo.value = [
      {
        title: '可调潜力评估',
        en: 'Adjustable Capacity Assessment',
        icon: 'device-line',
        data: [
          {
            name: '总用电负荷',
            en: 'Total Power Load',
            value: '126',
            unit: 'w',
          },
          {
            name: '总可调负荷',
            en: 'Total Adjustable Load',
            value: '7.5',
            unit: 'kw',
          },
          {
            name: '可调负荷比',
            en: 'Adjustable Load Ratio',
            value: '65.7',
            unit: '%',
          },
        ],
      },
      {
        title: '费用消耗统计',
        en: 'Electricity Cost Monitor',
        data: [
          {
            name: '当日累计电费',
            en: 'Daily Electricity Cost',
            value: '18.45',
            unit: '元',
          },
          {
            name: '预计月度电费',
            en: 'Projected monthly electricity cost',
            value: '245.60',
            unit: '元',
          },
          {
            name: '上月电费支出',
            en: 'Monthly Power Cost(Previous Month)',
            value: '225.77',
            unit: '元',
          },
        ],
      },
      {
        title: '重点设备监测',
        en: 'Key Device Monitoring',
        icon: 'focus-line',
        data: [
          {
            name: '当前最大负荷设备',
            en: 'Current Peak Load Device',
            value: '空调',
            unit: '',
          },
          {
            name: '负荷增长最快设备',
            en: 'Fastest Load Growth Device',
            value: '热水器',
            unit: '',
          },
          {
            name: '运行时间最长设备',
            en: 'Longest Running Device',
            value: '冰箱',
            unit: '',
          },
        ],
      },
    ]
  // }
}

// 监听用户选择变化
watch(selectedUser, (newValue) => {
  fetchPowerTrendData(newValue)
})

// 注释掉用户分布监听，改为使用日期选择
// watch(selectedDistributionUser, (newValue) => {
//   fetchPowerDistributionData(newValue)
// })

// 注释掉时间轴用户选择监听
// watch(selectedTimelineUser, (newValue) => {
//   fetchDeviceTimelineData(newValue)
// })

// 组件挂载时获取数据
onMounted(() => {
  fetchUserOptions()
  fetchCardInfo()
  fetchPowerTrendData(selectedUser.value)
  // 注释掉用户分布数据获取，改为使用本地虚拟数据
  // fetchPowerDistributionData(selectedDistributionUser.value)
  // 注释掉时间轴数据获取
  // fetchDeviceTimelineData(selectedTimelineUser.value)
  // 默认搜索用户001的设备
  // fetchUserDeviceData('用户001')
})

// 设备用电总览相关变量
const selectedOverviewDate = ref('2024-07-15')

// 设备用电总览虚拟数据 - 只有14-16号有数据，改为树形结构
const equipmentOverviewMockData = {
  '2024-07-14': [
    {
      id: 'resistive_14',
      loadType: '阻性负荷 (Resistive Load)',
      isParent: true,
      icon: 'fire-line',
      consumptionMonth: '7.75 kWh',
      consumptionPercentage: '62.9%',
      powerCurrent: '3.45 kW',
      powerPercentage: '58.7%',
      energyLevel: '-',
      children: [
        {
          id: 'water_heater_14',
          deviceName: '电热水器',
          deviceIcon: 'fire-fill',
          consumptionMonth: '3.45 kWh',
          consumptionPercentage: '44.5%',
          powerCurrent: '1.75 kW',
          powerPercentage: '50.7%',
          energyLevel: '一级'
        },
        {
          id: 'rice_cooker_14',
          deviceName: '电饭煲',
          deviceIcon: 'restaurant-line',
          consumptionMonth: '2.25 kWh',
          consumptionPercentage: '29.0%',
          powerCurrent: '0.80 kW',
          powerPercentage: '23.2%',
          energyLevel: '二级'
        },
        {
          id: 'lighting_14',
          deviceName: '照明设备',
          deviceIcon: 'lightbulb-line',
          consumptionMonth: '0.75 kWh',
          consumptionPercentage: '9.7%',
          powerCurrent: '0.60 kW',
          powerPercentage: '17.4%',
          energyLevel: '二级'
        },
        {
          id: 'heater_14',
          deviceName: '电暖器',
          deviceIcon: 'temp-hot-line',
          consumptionMonth: '0.16 kWh',
          consumptionPercentage: '2.1%',
          powerCurrent: '0.18 kW',
          powerPercentage: '5.2%',
          energyLevel: '三级'
        },
        {
          id: 'kettle_14',
          deviceName: '热水壶',
          deviceIcon: 'cup-line',
          consumptionMonth: '0.14 kWh',
          consumptionPercentage: '1.8%',
          powerCurrent: '0.12 kW',
          powerPercentage: '3.5%',
          energyLevel: '三级'
        }
      ]
    },
    {
      id: 'inductive_14',
      loadType: '感性负荷 (Inductive Load)',
      isParent: true,
      icon: 'flashlight-line',
      consumptionMonth: '2.46 kWh',
      consumptionPercentage: '28.9%',
      powerCurrent: '1.30 kW',
      powerPercentage: '29.2%',
      energyLevel: '-',
      children: [
        {
          id: 'fridge_14',
          deviceName: '冰箱压缩机',
          deviceIcon: 'fridge-line',
          consumptionMonth: '1.58 kWh',
          consumptionPercentage: '64.2%',
          powerCurrent: '0.88 kW',
          powerPercentage: '67.7%',
          energyLevel: '一级'
        },
        {
          id: 'washing_motor_14',
          deviceName: '洗衣机电机',
          deviceIcon: 'shirt-line',
          consumptionMonth: '0.88 kWh',
          consumptionPercentage: '35.8%',
          powerCurrent: '0.42 kW',
          powerPercentage: '32.3%',
          energyLevel: '二级'
        }
      ]
    },
    {
      id: 'nonlinear_14',
      loadType: '非线性负荷 (Nonlinear Load)',
      isParent: true,
      icon: 'computer-line',
      consumptionMonth: '0.58 kWh',
      consumptionPercentage: '7.5%',
      powerCurrent: '0.48 kW',
      powerPercentage: '11.1%',
      energyLevel: '-',
      children: [
        {
          id: 'tv_14',
          deviceName: '内置电视',
          deviceIcon: 'tv-line',
          consumptionMonth: '0.42 kWh',
          consumptionPercentage: '72.4%',
          powerCurrent: '0.32 kW',
          powerPercentage: '66.7%',
          energyLevel: '二级'
        },
        {
          id: 'charger_14',
          deviceName: '充电器/适配器',
          deviceIcon: 'battery-charge-line',
          consumptionMonth: '0.16 kWh',
          consumptionPercentage: '27.6%',
          powerCurrent: '0.16 kW',
          powerPercentage: '33.3%',
          energyLevel: '二级'
        }
      ]
    },
    {
      id: 'intermittent_14',
      loadType: '间歇性负荷 (Intermittent Load)',
      isParent: true,
      icon: 'timer-line',
      consumptionMonth: '0.12 kWh',
      consumptionPercentage: '1.5%',
      powerCurrent: '0.32 kW',
      powerPercentage: '7.4%',
      energyLevel: '-',
      children: [
        {
          id: 'microwave_14',
          deviceName: '微波炉',
          deviceIcon: 'home-gear-line',
          consumptionMonth: '0.08 kWh',
          consumptionPercentage: '66.7%',
          powerCurrent: '0.22 kW',
          powerPercentage: '68.8%',
          energyLevel: '三级'
        },
        {
          id: 'hairdryer_14',
          deviceName: '吹风机',
          deviceIcon: 'windy-line',
          consumptionMonth: '0.04 kWh',
          consumptionPercentage: '33.3%',
          powerCurrent: '0.10 kW',
          powerPercentage: '31.2%',
          energyLevel: '三级'
        }
      ]
    }
  ],
  '2024-07-15': [
    {
      id: 'resistive_15',
      loadType: '阻性负荷 (Resistive Load)',
      isParent: true,
      icon: 'fire-line',
      consumptionMonth: '7.30 kWh',
      consumptionPercentage: '62.9%',
      powerCurrent: '3.15 kW',
      powerPercentage: '58.7%',
      energyLevel: '-',
      children: [
        {
          id: 'water_heater_15',
          deviceName: '电热水器',
          deviceIcon: 'fire-fill',
          consumptionMonth: '3.65 kWh',
          consumptionPercentage: '50.0%',
          powerCurrent: '1.85 kW',
          powerPercentage: '58.7%',
          energyLevel: '一级'
        },
        {
          id: 'rice_cooker_15',
          deviceName: '电饭煲',
          deviceIcon: 'restaurant-line',
          consumptionMonth: '2.45 kWh',
          consumptionPercentage: '33.6%',
          powerCurrent: '0.85 kW',
          powerPercentage: '27.0%',
          energyLevel: '二级'
        },
        {
          id: 'lighting_15',
          deviceName: '照明设备',
          deviceIcon: 'lightbulb-line',
          consumptionMonth: '0.85 kWh',
          consumptionPercentage: '11.6%',
          powerCurrent: '0.65 kW',
          powerPercentage: '20.6%',
          energyLevel: '二级'
        },
        {
          id: 'heater_15',
          deviceName: '电暖器',
          deviceIcon: 'temp-hot-line',
          consumptionMonth: '0.19 kWh',
          consumptionPercentage: '2.6%',
          powerCurrent: '0.21 kW',
          powerPercentage: '6.7%',
          energyLevel: '三级'
        },
        {
          id: 'kettle_15',
          deviceName: '热水壶',
          deviceIcon: 'cup-line',
          consumptionMonth: '0.16 kWh',
          consumptionPercentage: '2.2%',
          powerCurrent: '0.14 kW',
          powerPercentage: '4.4%',
          energyLevel: '三级'
        }
      ]
    },
    {
      id: 'inductive_15',
      loadType: '感性负荷 (Inductive Load)',
      isParent: true,
      icon: 'flashlight-line',
      consumptionMonth: '2.36 kWh',
      consumptionPercentage: '28.9%',
      powerCurrent: '1.84 kW',
      powerPercentage: '29.2%',
      energyLevel: '-',
      children: [
        {
          id: 'fridge_15',
          deviceName: '冰箱压缩机',
          deviceIcon: 'fridge-line',
          consumptionMonth: '1.68 kWh',
          consumptionPercentage: '71.2%',
          powerCurrent: '0.92 kW',
          powerPercentage: '50.0%',
          energyLevel: '一级'
        },
        {
          id: 'washing_motor_15',
          deviceName: '洗衣机电机',
          deviceIcon: 'shirt-line',
          consumptionMonth: '0.95 kWh',
          consumptionPercentage: '40.3%',
          powerCurrent: '0.45 kW',
          powerPercentage: '24.5%',
          energyLevel: '二级'
        },
        {
          id: 'washing_machine_15',
          deviceName: '洗衣机',
          deviceIcon: 'shirt-line',
          consumptionMonth: '0.73 kWh',
          consumptionPercentage: '30.9%',
          powerCurrent: '0.47 kW',
          powerPercentage: '25.5%',
          energyLevel: '二级'
        }
      ]
    },
    {
      id: 'nonlinear_15',
      loadType: '非线性负荷 (Nonlinear Load)',
      isParent: true,
      icon: 'computer-line',
      consumptionMonth: '0.64 kWh',
      consumptionPercentage: '8.3%',
      powerCurrent: '0.54 kW',
      powerPercentage: '12.1%',
      energyLevel: '-',
      children: [
        {
          id: 'tv_15',
          deviceName: '内置电视',
          deviceIcon: 'tv-line',
          consumptionMonth: '0.48 kWh',
          consumptionPercentage: '75.0%',
          powerCurrent: '0.38 kW',
          powerPercentage: '70.4%',
          energyLevel: '二级'
        },
        {
          id: 'charger_15',
          deviceName: '充电器/适配器',
          deviceIcon: 'battery-charge-line',
          consumptionMonth: '0.16 kWh',
          consumptionPercentage: '25.0%',
          powerCurrent: '0.16 kW',
          powerPercentage: '29.6%',
          energyLevel: '二级'
        }
      ]
    },
    {
      id: 'intermittent_15',
      loadType: '间歇性负荷 (Intermittent Load)',
      isParent: true,
      icon: 'timer-line',
      consumptionMonth: '0.16 kWh',
      consumptionPercentage: '2.1%',
      powerCurrent: '0.38 kW',
      powerPercentage: '8.5%',
      energyLevel: '-',
      children: [
        {
          id: 'microwave_15',
          deviceName: '微波炉',
          deviceIcon: 'home-gear-line',
          consumptionMonth: '0.10 kWh',
          consumptionPercentage: '62.5%',
          powerCurrent: '0.25 kW',
          powerPercentage: '65.8%',
          energyLevel: '三级'
        },
        {
          id: 'hairdryer_15',
          deviceName: '吹风机',
          deviceIcon: 'windy-line',
          consumptionMonth: '0.06 kWh',
          consumptionPercentage: '37.5%',
          powerCurrent: '0.13 kW',
          powerPercentage: '34.2%',
          energyLevel: '三级'
        }
      ]
    }
  ],
  '2024-07-16': [
    {
      id: 'resistive_16',
      loadType: '阻性负荷 (Resistive Load)',
      isParent: true,
      icon: 'fire-line',
      consumptionMonth: '7.85 kWh',
      consumptionPercentage: '64.2%',
      powerCurrent: '3.95 kW',
      powerPercentage: '60.1%',
      energyLevel: '-',
      children: [
        {
          id: 'water_heater_16',
          deviceName: '电热水器',
          deviceIcon: 'fire-fill',
          consumptionMonth: '3.85 kWh',
          consumptionPercentage: '49.0%',
          powerCurrent: '1.95 kW',
          powerPercentage: '49.4%',
          energyLevel: '一级'
        },
        {
          id: 'rice_cooker_16',
          deviceName: '电饭煲',
          deviceIcon: 'restaurant-line',
          consumptionMonth: '2.65 kWh',
          consumptionPercentage: '33.8%',
          powerCurrent: '0.90 kW',
          powerPercentage: '22.8%',
          energyLevel: '二级'
        },
        {
          id: 'lighting_16',
          deviceName: '照明设备',
          deviceIcon: 'lightbulb-line',
          consumptionMonth: '0.95 kWh',
          consumptionPercentage: '12.1%',
          powerCurrent: '0.70 kW',
          powerPercentage: '17.7%',
          energyLevel: '二级'
        },
        {
          id: 'heater_16',
          deviceName: '电暖器',
          deviceIcon: 'temp-hot-line',
          consumptionMonth: '0.22 kWh',
          consumptionPercentage: '2.8%',
          powerCurrent: '0.24 kW',
          powerPercentage: '6.1%',
          energyLevel: '三级'
        },
        {
          id: 'kettle_16',
          deviceName: '热水壶',
          deviceIcon: 'cup-line',
          consumptionMonth: '0.18 kWh',
          consumptionPercentage: '2.3%',
          powerCurrent: '0.16 kW',
          powerPercentage: '4.1%',
          energyLevel: '三级'
        }
      ]
    },
    {
      id: 'inductive_16',
      loadType: '感性负荷 (Inductive Load)',
      isParent: true,
      icon: 'flashlight-line',
      consumptionMonth: '2.66 kWh',
      consumptionPercentage: '29.7%',
      powerCurrent: '2.00 kW',
      powerPercentage: '30.2%',
      energyLevel: '-',
      children: [
        {
          id: 'fridge_16',
          deviceName: '冰箱压缩机',
          deviceIcon: 'fridge-line',
          consumptionMonth: '1.78 kWh',
          consumptionPercentage: '66.9%',
          powerCurrent: '0.98 kW',
          powerPercentage: '49.0%',
          energyLevel: '一级'
        },
        {
          id: 'washing_motor_16',
          deviceName: '洗衣机电机',
          deviceIcon: 'shirt-line',
          consumptionMonth: '1.05 kWh',
          consumptionPercentage: '39.5%',
          powerCurrent: '0.50 kW',
          powerPercentage: '25.0%',
          energyLevel: '二级'
        },
        {
          id: 'washing_machine_16',
          deviceName: '洗衣机',
          deviceIcon: 'shirt-line',
          consumptionMonth: '0.83 kWh',
          consumptionPercentage: '31.2%',
          powerCurrent: '0.52 kW',
          powerPercentage: '26.0%',
          energyLevel: '二级'
        }
      ]
    },
    {
      id: 'nonlinear_16',
      loadType: '非线性负荷 (Nonlinear Load)',
      isParent: true,
      icon: 'computer-line',
      consumptionMonth: '0.72 kWh',
      consumptionPercentage: '8.9%',
      powerCurrent: '0.62 kW',
      powerPercentage: '13.2%',
      energyLevel: '-',
      children: [
        {
          id: 'tv_16',
          deviceName: '内置电视',
          deviceIcon: 'tv-line',
          consumptionMonth: '0.54 kWh',
          consumptionPercentage: '75.0%',
          powerCurrent: '0.44 kW',
          powerPercentage: '71.0%',
          energyLevel: '二级'
        },
        {
          id: 'charger_16',
          deviceName: '充电器/适配器',
          deviceIcon: 'battery-charge-line',
          consumptionMonth: '0.18 kWh',
          consumptionPercentage: '25.0%',
          powerCurrent: '0.18 kW',
          powerPercentage: '29.0%',
          energyLevel: '二级'
        }
      ]
    },
    {
      id: 'intermittent_16',
      loadType: '间歇性负荷 (Intermittent Load)',
      isParent: true,
      icon: 'timer-line',
      consumptionMonth: '0.18 kWh',
      consumptionPercentage: '2.2%',
      powerCurrent: '0.42 kW',
      powerPercentage: '8.9%',
      energyLevel: '-',
      children: [
        {
          id: 'microwave_16',
          deviceName: '微波炉',
          deviceIcon: 'home-gear-line',
          consumptionMonth: '0.12 kWh',
          consumptionPercentage: '66.7%',
          powerCurrent: '0.28 kW',
          powerPercentage: '66.7%',
          energyLevel: '三级'
        },
        {
          id: 'hairdryer_16',
          deviceName: '吹风机',
          deviceIcon: 'windy-line',
          consumptionMonth: '0.06 kWh',
          consumptionPercentage: '33.3%',
          powerCurrent: '0.14 kW',
          powerPercentage: '33.3%',
          energyLevel: '三级'
        }
      ]
    }
  ]
}

// 当前显示的设备用电总览数据
const equipmentOverviewData = computed(() => {
  const dateData = equipmentOverviewMockData[selectedOverviewDate.value]

  if (dateData) {
    return dateData
  } else {
    // 其他日期显示暂无数据的占位符
    return [
      {
        loadType: '暂无数据',
        deviceName: '-',
        consumptionMonth: '-',
        consumptionPercentage: '-',
        powerCurrent: '-',
        powerPercentage: '-',
        energyLevel: '-'
      }
    ]
  }
})

// 合计统计数据
const totalSummary = computed(() => {
  const data = equipmentOverviewData.value
  let totalConsumption = 0
  let totalPower = 0

  if (data && data.length > 0 && data[0].loadType !== '暂无数据') {
    // 只统计父级负荷类型的数据
    data.forEach(item => {
      if (item.isParent && item.consumptionMonth !== '-') {
        // 提取数值部分
        const consumption = parseFloat(item.consumptionMonth.replace(' kWh', '')) || 0
        const power = parseFloat(item.powerCurrent.replace(' kW', '')) || 0
        totalConsumption += consumption
        totalPower += power
      }
    })
  }

  return {
    totalConsumption: totalConsumption.toFixed(2),
    totalPower: totalPower.toFixed(2),
    status: totalConsumption > 0 ? '正常运行' : '暂无数据'
  }
})

// 处理日期变化
const handleOverviewDateChange = (date: string) => {
  console.log('选择的日期:', date)
  selectedOverviewDate.value = date
}

// 处理负荷类型分布日期变化
const handleDistributionDateChange = (date: string) => {
  console.log('选择的负荷分布日期:', date)
  selectedDistributionDate.value = date
}

// 获取能效等级标签类型
const getEnergyLevelType = (level: string) => {
  switch (level) {
    case '一级':
      return 'success'
    case '二级':
      return 'warning'
    case '三级':
      return 'danger'
    case '-':
      return 'info'
    default:
      return 'info'
  }
}
</script>

<style lang="scss" scoped>
.equipment-load-container {
  padding: 20px;
  background-color: #f5f7fa;

  &.no-background-container {
    background-color: #f5f7fa;
  }

  :deep(.el-card) {
    background-color: #fff;
    background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 1), rgba(240, 255, 250, 0.5));
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 24px rgba(10, 179, 137, 0.15);
      transform: translateY(-5px);
    }

    .el-card__header {
      position: relative;

      > div > span {
        display: flex;
        align-items: center;

        i {
          margin-right: 3px;
        }
      }
    }

    .el-card__body {
      position: relative;

      .card-footer-tag {
        position: absolute;
        right: var(--el-margin);
        bottom: 15px;
      }
    }
  }

  .page-top {
    min-height: 200px;

    .card-top {
      position: relative;
      padding-bottom: 15px;
      margin-bottom: 15px;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 1px dashed #ebeef5;

      .title-with-icon {
        display: flex;
        gap: 8px;
        align-items: center;

        .card-icon {
          width: 40px;
          height: 40px;
          padding: 8px;
          font-size: 24px;
          color: #0ab389;
          background-color: rgba(10, 179, 137, 0.1);
          border-radius: 8px;
        }
      }

      div:first-child {
        color: #303133;
      }

      div:last-child {
        margin-top: 4px;
        font-size: 14px;
        font-weight: normal;
        color: #909399;
      }
    }
  }
}

.page-top {
  margin-bottom: 20px;
}

.card-style {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    height: 580px;
  }
}
.card-middle .middle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding-bottom: 10px;
  margin-top: 16px;
  border-bottom: 1px solid #f2f5fa;
  transition: all 0.3s ease;

  &:hover {
    border-bottom-color: #d4e6e0;
    transform: translateX(5px);
  }

  .middle-left {
    font-size: 16px;

    div:first-child {
      font-weight: 500;
      color: #303133;
    }

    div:last-child {
      margin-top: 4px;
      font-size: 12px;
      color: #909399;
    }
  }

  .middle-right {
    display: flex;
    gap: 8px;
    align-items: center;

     &::before {
      position: absolute;
      top: 50%;
      left: -15px;
      width: 3px;
      height: 70%;
      content: '';
      background-color: #0ab389;
      border-radius: 3px;
      opacity: 0;
      transform: translateY(-50%);
      transition: all 0.3s ease;
    }

    span:nth-child(1) {
      font-size: 26px;
      font-weight: bold;
      color: #0ab389;
      transition: all 0.3s ease;
    }

    span:nth-child(2) {
      margin-left: 6px;
      font-size: 14px;
      color: #909399;
    }
  }

  &:hover .middle-right::before {
    left: -10px;
    opacity: 1;
  }
}

.index-middle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 18px;
  text-align: center;

  .middle-left {
    display: flex;
    margin: 0;
    vertical-align: middle;

    .title-style {
      display: inline-block;
      width: 5px;
      height: 20px;
      margin-right: 10px;
      background-color: #0ab389;
      border-radius: 0 5px 5px 0;
    }
  }

  .middle-right {
    display: flex;
    gap: 8px;
    align-items: center;

    :deep(.el-date-editor) {
      .el-input__wrapper {
        border-color: #c2e7dd;

        &:hover {
          border-color: #0ab389;
        }

        &.is-focus {
          border-color: #0ab389;
          box-shadow: 0 0 0 2px rgba(10, 179, 137, 0.2);
        }
      }
    }
  }
}

.equipment-table-container {
  margin-top: 16px;

  :deep(.el-table) {
    font-size: 12px;
    border: 1px solid #ebeef5;

    .el-table__header th {
      height: 35px;
      padding: 5px 0;
      font-size: 13px;
      font-weight: bold;
      color: #333;
      background-color: #f2f5fa !important;
    }

    .el-table__row td {
      height: 40px;
      padding: 0;
      font-size: 12px;
    }

    .el-table__body {
      overflow-y: auto !important;

      .el-table__row {
        &:hover {
          background-color: #f5f7fa;
        }

        // 父级行样式（负荷类型）
        &.el-table__row--level-0 {
          background-color: #fafafa;
          font-weight: bold;

          td {
            border-bottom: 1px solid #e0e0e0;
            vertical-align: middle;
            height: 36px;
          }

          .cell {
            display: flex;
            align-items: center;
            height: 36px;
            line-height: 36px;
          }
        }

        // 子级行样式（具体设备）
        &.el-table__row--level-1 {
          background-color: #fff;

          td {
            vertical-align: middle;
            height: 36px;
          }

          .cell {
            display: flex;
            align-items: center;
            height: 36px;
            line-height: 36px;
          }
        }
      }
    }
  }

  .el-button {
    height: 24px;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1;

    &.el-button--primary {
      background-color: #409eff;
      border-color: #409eff;
    }
  }
}

.distribution-charts {
  .chart-container {
    margin-bottom: 10px;
  }
}

.equipment-info {
  padding: 15px;
  margin-bottom: 20px;
  background-color: #f8fffc;
  border: 1px solid #e8f6f1;
  border-radius: 8px;

  h4 {
    margin: 0 0 5px;
    font-size: 16px;
    font-weight: bold;
    color: #0ab389;
  }

  p {
    margin: 0;
    font-size: 14px;
    color: #606266;
  }
}

.no-equipment-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  margin-top: 20px;
  text-align: center;

  :deep(.el-empty) {
    .el-empty__image {
      opacity: 0.6;
    }

    .el-empty__description {
      margin-top: 10px;
      font-size: 14px;
      color: #909399;
    }
  }
}

:deep(.el-dialog__header) {
  background-color: #f8fffc;
  border-bottom: 1px solid #e8f6f1;
}

:deep(.el-dialog__body) {
  padding: 20px;
  background-color: #fff;
}

:deep(.el-dialog) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:deep(.el-select) {
  .el-input__inner {
    border-color: #c2e7dd;
    transition: all 0.3s;

    &:focus {
      border-color: #0ab389;
      box-shadow: 0 0 0 2px rgba(10, 179, 137, 0.2);
    }
  }
}

:deep(.el-table) {
  .el-table__header th {
    background-color: #dbf4ee !important;
  }
}

.exception-table {
  :deep(.el-table) {
    .el-table__header th {
      background-color: #dbf4ee !important;
    }
  }
}

:deep(.el-button--primary) {
  background-color: #0ab389;
  border-color: #0ab389;
  transition: all 0.3s;

  &:hover,
  &:focus {
    background-color: #09a17c;
    border-color: #09a17c;
    box-shadow: 0 2px 8px rgba(10, 179, 137, 0.3);
    transform: translateY(-1px);
  }
}

:deep(.el-tag) {
  &.el-tag--success {
    color: #0ab389;
    background-color: #f0f9eb;
    border-color: #c2e7dd;
  }

  &.el-tag--danger {
    color: #f56c6c;
    background-color: #fef0f0;
    border-color: #fde2e2;
  }
}

// 设备查询样式
.equipment-search-section {
  margin-top: 16px;
  margin-bottom: 16px;

  .equipment-search-container {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;

    .search-input-full {
      flex: 1;
      width: 100%;

      :deep(.el-input__wrapper) {
        height: 36px;
        background-color: #fff;
        border: 1px solid #c2e7dd;
        border-radius: 6px;
        box-shadow: none;
        transition: all 0.3s;

        &:hover {
          border-color: #0ab389;
        }

        &.is-focus {
          border-color: #0ab389;
          box-shadow: 0 0 0 2px rgba(10, 179, 137, 0.2);
        }
      }

      :deep(.el-input__prefix) {
        font-size: 16px;
        color: #0ab389;
      }

      :deep(.el-input__inner) {
        height: 34px;
        padding-left: 8px;
        font-size: 14px;
        line-height: 34px;
        color: #606266;

        &::placeholder {
          font-size: 14px;
          color: #a8abb2;
        }
      }

      :deep(.el-input__prefix-inner) {
        display: flex;
        align-items: center;
        padding-left: 8px;
      }
    }

    .search-button {
      height: 36px;
      padding: 0 16px;
      font-size: 14px;
      font-weight: 500;
      color: white;
      white-space: nowrap;
      background-color: #0ab389;
      border: 1px solid #0ab389;
      border-radius: 6px;
      transition: all 0.3s;

      &:hover {
        background-color: #09a278;
        border-color: #09a278;
        box-shadow: 0 2px 8px rgba(10, 179, 137, 0.3);
      }

      &:active {
        background-color: #087d6a;
        border-color: #087d6a;
      }
    }
  }

  .current-user-title {
    padding: 8px 12px;
    margin-top: 12px;
    background-color: #f0f9ff;
    border: 1px solid #d1e9ff;
    border-radius: 6px;

    .user-title-text {
      font-size: 14px;
      font-weight: 500;
      color: #0ab389;

      &::before {
        margin-right: 6px;
        font-size: 12px;
        color: #666;
        content: '当前查询用户：';
      }
    }
  }
}

.equipment-search-container {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;

  .search-input {
    flex: 1;
    min-width: 180px;
    max-width: 220px;

    :deep(.el-input__wrapper) {
      height: 32px;
      background-color: #fff;
      border: 1px solid #c2e7dd;
      border-radius: 6px;
      box-shadow: none;
      transition: all 0.3s;

      &:hover {
        border-color: #0ab389;
      }

      &.is-focus {
        border-color: #0ab389;
        box-shadow: 0 0 0 2px rgba(10, 179, 137, 0.2);
      }
    }

    :deep(.el-input__prefix) {
      font-size: 16px;
      color: #0ab389;
    }

    :deep(.el-input__inner) {
      height: 30px;
      padding-left: 8px;
      font-size: 14px;
      line-height: 30px;
      color: #606266;

      &::placeholder {
        font-size: 14px;
        color: #a8abb2;
      }
    }

    :deep(.el-input__prefix-inner) {
      display: flex;
      align-items: center;
      padding-left: 8px;
    }
  }

  .search-button {
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    background-color: #0ab389;
    border: 1px solid #0ab389;
    border-radius: 6px;
    transition: all 0.3s;

    &:hover {
      background-color: #09a278;
      border-color: #09a278;
      box-shadow: 0 2px 8px rgba(10, 179, 137, 0.3);
    }

    &:active {
      background-color: #087d6a;
      border-color: #087d6a;
    }
  }
}

// 注释掉甘特图相关样式
// // 甘特图样式
// .gantt-chart-container {
//   margin-top: 20px;
//   overflow: hidden;
//   font-size: 12px;
//   background-color: #fff;
//   border: 1px solid #e4e7ed;
//   border-radius: 4px;

//   .gantt-header {
//     display: flex;
//     font-weight: bold;
//     color: white;
//     background-color: #5470c6;
//     border-bottom: 1px solid #e4e7ed;

//     .device-column {
//       display: flex;
//       align-items: center;
//       justify-content: center;
//       width: 60px;
//       height: 40px;
//       font-size: 14px;
//       background-color: #5470c6;
//       border-right: 1px solid #e4e7ed;
//     }

//     .time-columns {
//       display: flex;
//       flex: 1;

//       .time-column {
//         display: flex;
//         flex: 1;
//         align-items: center;
//         justify-content: center;
//         height: 40px;
//         font-size: 12px;
//         color: white;
//         border-right: 1px solid rgba(255, 255, 255, 0.2);

//         &:last-child {
//           border-right: none;
//         }
//       }
//     }
//   }

//   .gantt-body {
//     .gantt-row {
//       display: flex;
//       border-bottom: 1px solid #e4e7ed;

//       &:last-child {
//         border-bottom: none;
//       }

//       .device-label {
//         display: flex;
//         align-items: center;
//         justify-content: center;
//         width: 60px;
//         height: 50px;
//         font-size: 14px;
//         font-weight: 500;
//         color: #333;
//         background-color: #f8f9fa;
//         border-right: 1px solid #e4e7ed;
//       }

//       .timeline-container {
//         position: relative;
//         flex: 1;
//         height: 50px;
//         background-color: #fff;

//         .timeline-grid {
//           position: absolute;
//           top: 0;
//           left: 0;
//           z-index: 1;
//           display: flex;
//           width: 100%;
//           height: 100%;

//           .grid-line {
//             flex: 1;
//             border-right: 1px solid #f0f0f0;

//             &:last-child {
//               border-right: none;
//             }
//           }
//         }

//         .timeline-bars {
//           position: relative;
//           z-index: 2;
//           width: 100%;
//           height: 100%;

//           .time-bar {
//             position: absolute;
//             top: 50%;
//             height: 28px;
//             margin-top: -14px;
//             cursor: pointer;
//             background-color: #409eff;
//             border-radius: 14px;
//             transition: all 0.3s ease;

//             &:hover {
//               box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
//               transform: scaleY(1.1);
//             }
//           }
//         }
//       }
//     }
//   }
// }

// 设备用电总览样式
.equipment-overview-table {
  margin-top: 8px;
  height: auto;

  :deep(.el-table) {
    font-size: 11px;
    height: 292px !important;
    width: 100% !important;

    .el-table__header th {
      height: 32px;
      padding: 4px 0;
      font-size: 11px;
      font-weight: bold;
      color: #333;
      background-color: #f2f5fa !important;
    }

    .el-table__row td {
      height: 36px;
      padding: 8px 4px;
      font-size: 11px;
      vertical-align: middle;

      .percentage {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
      }

      .main-value {
        font-weight: bold;
        color: #333;
      }

      .no-data {
        color: #909399;
      }
    }

    .el-table__body {
      overflow-y: auto !important;

      .el-table__row {
        &:hover {
          background-color: #f5f7fa;
        }

        // 父级行样式（负荷类型）
        &.el-table__row--level-0 {
          background-color: #fafafa;
          font-weight: bold;

          td {
            border-bottom: 1px solid #e0e0e0;
            vertical-align: middle;
          }

          .cell {
            display: flex;
            align-items: center;
          }
        }

        // 子级行样式（具体设备）
        &.el-table__row--level-1 {
          background-color: #fff;

          td {
            vertical-align: middle;
          }

          .cell {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    // 展开收缩图标样式
    .el-table__expand-icon {
      color: #409eff;
      font-size: 12px;
      vertical-align: middle;
      margin-right: 4px;
      align-self: center;
      line-height: 1;

      &.el-table__expand-icon--expanded {
        transform: rotate(90deg);
      }
    }

    // 确保第一列的内容对齐
    .el-table__cell:first-child {
      .cell {
        display: flex;
        align-items: center;

        > * {
          align-self: center;
        }
      }
    }

    // 确保表格能够正确显示滚动条
    .el-scrollbar {
      height: 100%;

      .el-scrollbar__wrap {
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }

  :deep(.el-tag) {
    font-size: 10px;
    height: 18px;
    line-height: 16px;

    &.el-tag--success {
      color: #0ab389;
      background-color: #f0f9eb;
      border-color: #c2e7dd;
    }

    &.el-tag--warning {
      color: #e6a23c;
      background-color: #fdf6ec;
      border-color: #f5dab1;
    }

    &.el-tag--danger {
      color: #f56c6c;
      background-color: #fef0f0;
      border-color: #fde2e2;
    }

    &.el-tag--info {
      color: #909399;
      background-color: #f4f4f5;
      border-color: #e9e9eb;
    }
  }
}

.legend-container {
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;

  .legend-title {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
  }

  .legend-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .legend-item {
      display: flex;
      align-items: center;
      font-size: 11px;
      color: #666;

      .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 4px;
        flex-shrink: 0;
      }

      .success {
        background-color: #0ab389;
      }

      .warning {
        background-color: #e6a23c;
      }

      .danger {
        background-color: #f56c6c;
      }
    }
  }
}

.load-type-parent {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #1890ff;
  width: 100%;
  min-height: 36px;

  .load-type-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    color: #1890ff;
    flex-shrink: 0;
    margin-top: -5px;
  }
}

.device-name {
  display: flex;
  align-items: center;
  color: #606266;
  width: 100%;
  min-height: 36px;

  .device-icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    color: #909399;
    flex-shrink: 0;
  }
}

.parent-placeholder {
  color: #c0c4cc;
  font-style: italic;
}

// 合计统计区域样式
.summary-container {
  margin-top: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);

  .summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    .summary-title {
      font-size: 14px;
      font-weight: bold;
      color: white;
      letter-spacing: 0.5px;
    }

    .summary-status {
      .status-indicator {
        padding: 2px 8px;
        font-size: 11px;
        background-color: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        backdrop-filter: blur(5px);
      }
    }
  }

  .summary-content {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .summary-item {
      text-align: center;
      flex: 1;

      &:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
      }

      .summary-label {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 4px;
        font-weight: 400;
      }

      .summary-value {
        font-size: 16px;
        font-weight: bold;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }

      &.status-overview {
        .summary-value {
          font-size: 14px;
          color: #d4ffdb;
        }
      }
    }
  }

  // 悬停效果
  &:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
    transform: translateY(-1px);
    transition: all 0.3s ease;
  }
}

// 用电保证分析样式
.power-guarantee-analysis {
  padding: 15px 0;

  .analysis-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 15px;
    margin-bottom: 15px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 252, 255, 0.9));
    border: 1px solid rgba(240, 245, 250, 0.8);
    border-left: 4px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(3px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    &:nth-child(1) {
      border-left-color: #ff9500;

      .analysis-icon {
        background: linear-gradient(135deg, #ff9500, #ffb84d);
      }
    }

    &:nth-child(2) {
      border-left-color: #ffc107;

      .analysis-icon {
        background: linear-gradient(135deg, #ffc107, #ffd54f);
      }
    }

    &:nth-child(3) {
      border-left-color: #0ab389;

      .analysis-icon {
        background: linear-gradient(135deg, #0ab389, #4ecdc4);
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .analysis-left {
    display: flex;
    align-items: center;
    flex: 1;

    .analysis-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      border-radius: 12px;
      flex-shrink: 0;

      i {
        font-size: 24px;
        color: white;
      }
    }

    .analysis-content {
      flex: 1;

      .analysis-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 6px;
        line-height: 1.3;
      }

      .analysis-description {
        font-size: 12px;
        color: #666;
        line-height: 1.4;
        max-width: 200px;
        word-wrap: break-word;
      }
    }
  }

  .analysis-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    text-align: center;
    min-width: 120px;

    .main-value {
      font-size: 18px;
      font-weight: bold;
      color: #0ab389;
      line-height: 1.2;
    }

    .percentage {
      font-size: 18px;
      font-weight: bold;
      color: #ff6b6b;
      line-height: 1.2;
    }

    .sub-label {
      font-size: 11px;
      color: #999;
      line-height: 1.2;
      margin-top: 2px;
    }
  }
}
</style>
